<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider class="layout-sider" theme="light" v-model="collapsed" collapsible
                    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, zIndex: 999 }">
      <div class="logo">
        <img src="../assets/logo.png"/>
      </div>
      <a-menu theme="light" :default-selected-keys="['1']" mode="inline">
        <template v-for="(item) in menuTree">
          <a-sub-menu  :key="item.id" v-if="isHasMenu(item.id)">
            <span slot="title"><a-icon :type="item.icon"/><span>{{ item.title }}</span></span>
            <template v-for="(child) in item.children">
              <a-menu-item :key="child.id" v-if="isHasMenu(child.id)" @click="goRouter(child)">
                {{ child.title }}
              </a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: !collapsed ? '200px' : '80px' }" class="layout-content">
      <a-layout-header style="background: #fff; padding: 0 16px" class="flex align_center justify_between">
        <div>
          <a-icon type="user" style="margin-right: 10px"/>
          <span>{{ login_info.username }} <span v-if="login_info.name">[ {{login_info.name}} ]</span></span>
        </div>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">
              <a-icon type="edit"/>
              修改密码
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="logout"/>
              退出登录
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 设置
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content style="margin: 16px">
        <div :style="{ padding: '20px', background: '#fff', height: '100%' }">
          <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit" @change='onChange'>
            <a-tab-pane v-for="(pane, index) in panes" :key="index" :tab="pane.title">
            </a-tab-pane>
          </a-tabs>
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center; padding: 1px 0 16px;">
        Xie Ping Background Management System ©2021 Created by 30Days
      </a-layout-footer>
    </a-layout>
    <a-modal
        :width="450"
        title="修改密码"
        :visible="changePasswordVisible"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-input-password size="large" ref="userNameInput" type="password" v-model="oldPassword" placeholder="旧密码">
        <a-icon slot="prefix" type="form"/>
      </a-input-password>
      <a-input-password size="large" ref="userNameInput" type="password" v-model="newPassword" placeholder="新密码"
                        style="margin: 20px 0;">
        <a-icon slot="prefix" type="form"/>
      </a-input-password>
      <a-input-password size="large" ref="userNameInput" type="password" v-model="queryPassword" placeholder="确认新密码">
        <a-icon slot="prefix" type="form"/>
      </a-input-password>
    </a-modal>
  </a-layout>
</template>
<script>
import routerTool from "@/router/vouter.tools";

export default {
  name: "Home",
  data() {
    return {
      changePasswordVisible: false,
      collapsed: false,
      menuTree: [],
      accountMenu: [],
      oldPassword: "",
      newPassword: "",
      queryPassword: "",
      login_info: {},
      activeKey: 0,
      panes: [],
    };
  },
  created() {
    this.menuTree = routerTool.getMenuTree()
    this.panes = [{
      title: this.menuTree[0].children[0].title, 
      path : this.menuTree[0].children[0].path
    }]
    this.login_info = JSON.parse(sessionStorage.getItem("LOGIN_INFO"))
    this.accountMenu = this.login_info.group.menu.split(",")
  },
  methods: {
    isHasMenu(id){
      let is
      if (id.split('-').length === 1) {
        // 一级菜单
        is = this.accountMenu.filter(i => {return i.split('-')[0] == id}).length > 0
      } else if (id.split('-').length === 2) {
        // 二级
        is = this.accountMenu.filter(i => {return i == id}).length > 0
      }
      return is
    },

    goRouter(item) {
      const filter = this.panes.filter(i => {
        return i.path == item.path
      })
      if (filter.length > 0) {
        let _index
        this.panes.forEach((i, index) => {
          if (i.path == item.path) {
            _index = index
          }
        })
        this.activeKey = _index
      } else {
        this.panes.push({
          title: item.title,
          path: item.path
        })
        this.activeKey = this.panes.length - 1
      }
      this.$router.push(item.path)
    },

    onChange(targetKey){
      this.activeKey = targetKey
      this.$router.push(
        this.panes[targetKey].path
      )
    },

    onEdit(targetKey, action){
      switch (action) {
        case "remove":
          this.panes.splice(targetKey, 1)
          break;
      
        default:
          break;
      }
    },

    handleMenuClick(event) {
      const _this = this
      switch (event.key.toString()) {
        case '1':
          // 修改密码
          this.changePasswordVisible = true
          break;
        case '2':
          // 退出登录
          this.$confirm({
            content: '是否确认退出？',
            onOk() {
              sessionStorage.removeItem("LOGIN_INFO")
              sessionStorage.removeItem("TOKEN")
              _this.$router.replace('/')
            },
          });
          break;
      }
    },

    handleCancel() {
      this.changePasswordVisible = false
      this.oldPassword = ''
      this.newPassword = ''
      this.queryPassword = ''
    },

    handleOk() {
      if (!this.oldPassword || !this.newPassword || !this.queryPassword) {
        this.$message.error("请将内容填入完整！")
        return
      }
      if (this.newPassword !== this.queryPassword) {
        this.$message.error("两次输入的新密码不一致！")
        return
      }
      this.Http.post('/admin/admin/password', {
        oldpassword: this.oldPassword,
        password: this.newPassword,
        queryPassword: this.queryPassword,
      }).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg)
          this.handleCancel()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
};
</script>

<style>
.ant-layout {
}

#components-layout-demo-side .logo img {
  width: 100%;
  padding: 20px;
}

.layout-sider {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05);
}

.layout-sider::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.layout-sider::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.05) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.05) 50%,
      rgba(0, 0, 0, 0.05) 75%,
      transparent 75%,
      transparent
  );
}

.layout-sider::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.03);
  background: #ededed;
  border-radius: 3px;
}

.ant-layout-sider-children {
  height: auto;
}

.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  border-right: 0px;
}

.layout-content {
  transition: all 0.2s;
}

</style>
